<?xml version="1.0" encoding="UTF-8" ?>
<%@page import="bll.CommonBll"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<%@page import="util.*"%>
<%@page import="dal.*"%>
<%@ page import="model.*,java.util.*"%>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Insert title here</title>
	
	<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/inputForm.css" />
<link rel="stylesheet" href="css/listForm.css" />
<link rel="stylesheet" href="css/jquery-ui-1.8.14.custom.css" type="text/css" />
<link rel="stylesheet" href="css/hyjack.css" type="text/css" />
<link rel="stylesheet" href="css/datepicker.css" type="text/css" />
<link rel="stylesheet" href="css/themes/ui-lightness/jquery.ui.all.css" />
<link rel="stylesheet" href="css/jquery-ui-timepicker.css" type="text/css" />
<link rel="stylesheet" href="css/jquery-datepicker.css" />
<link rel="stylesheet" href="css/jquery-dialog.css" />

<script language="javascript" type="text/javascript" src="js/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.hyjack.select.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.ui.core.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.ui.widget.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.ui.timepicker.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.ui.datepicker.js"></script>
<script language="javascript" type="text/javascript" src="js/datepicker.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.hyjack.js"></script> 
<script language="javascript" type="text/javascript" src="js/ajaxQuickInsert.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.numeric.js"></script>
<script language="javascript" type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.ui.tools.min.js"></script>
	<script language="javascript" type="text/javascript">
	$(document).ready(pageLoaded);

	function pageLoaded()
	{
		turnOnNumbericInput();
		initDateTimePicker();
		initTooltip();
		
	} 
	var current="Expired";
		var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");

		function countdown(yr,m,d,h,mi){

			theyear=yr;themonth=m;theday=d;thehour=h;theminute=mi;
			var today=new Date();
			var todayy=today.getYear();
			if (todayy < 1000)
			todayy+=1900;
			var todaym=today.getMonth();
			var todayd=today.getDate();
			var todayh=today.getHours();
			var todaymin=today.getMinutes();
			var todaysec=today.getSeconds();
			var todaystring=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec;
			futurestring=montharray[m-1]+" "+d+", "+yr+" "+h+":"+mi;
			dd=Date.parse(futurestring)-Date.parse(todaystring);
			dday=Math.floor(dd/(60*60*1000*24)*1);
			dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1);
			dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);
			dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);
			if(dday==0&&dhour==0&&dmin==0&&dsec==0){
		
				alert("Time up! Go to hell");
				return;
			}
			else{
				document.getElementById('countdown_day').innerHTML=dday;
				document.getElementById('countdown_hour').innerHTML=dhour;
				document.getElementById('countdown_min').innerHTML=dmin;
				document.getElementById('countdown_sec').innerHTML=dsec;
				setTimeout("countdown(theyear,themonth,theday,thehour,theminute)",1000);
			}
		}
		function count()
		{
			var strTime=$("#time").val();
			var datetimeComp = strTime.split(" at ");
			var date=datetimeComp[0];
			var time=datetimeComp[1];

			var dateComp = date.split("/");
			var timeComp = time.split(":");
			var day=dateComp[0];
			var month=dateComp[1];
			var year=dateComp[2];
			var hour=timeComp[0];
			var minute=timeComp[1];
			countdown(year, month, day, hour, minute);
		}
	
	
	</script>
</head>
<body>
<div class="info">
	<input type="text" maxlength="19" class="inputDateTime" id="time" name="time" title="Click here to choose time<br/>Note: The format is <b>dd/mm/yyyy at hh:mm</b>" onblur="validateRequiredInput('time',true);" onchange="validateDateTimeInput('time', true);"/>
	
	<button  onclick="count()">Start Count</button>
	<center>
		 <div id="counter" class="counter">
		
			<span  id="countdown_day"></span><span> Days</span>
			<span  id="countdown_hour"></span><span> Hours</span>
			<span  id="countdown_min"></span><span> Minutes</span>
			<span  id="countdown_sec"></span><span> Seconds</span>
		
		</div>
	</center>
</div>
</body>
</html>